<template>
	<view class="main">
		<uni-search-bar @input="search" placeholder="搜索素材名称" bgColor="#fff" />
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="flex align between info">
				<view class="info-left">
					<view class="title">{{item.name}}</view>
					<view class="time">发布时间：{{item.create_time}}</view>
				</view>
				<view class="select select2" v-if="item.checked" @click="toSelect2(item.id,index)">已选择</view>
				<view class="select" v-else @click="toSelect(item.id,index)">选择</view>
			</view>
			<view class="list-btns">
				<navigator :url="'/pages/manage/materialList?id='+item.id" hover-class="none" class="list-btn">素材详情
				</navigator>
			</view>
		</view>
		<view class="btns" @click="toUrl()">确定选择</view>
	</view>
</template>

<script>
	import {
		materialOptions
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				show: false,
				show2: false,
				totalPage: 1,
				page: 0,
				offset: 10,
				list: [],
				scrollTop: 0,
				empty: false,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				name: '',
				name2: '',
				gId: '',
				delId:'',
				store_id:'',
				list2:[]
			};
		},
		onLoad(option) {
			this.store_id = option.id
			this.getlist()
		},
		methods: {
			async getlist() {
				const result = await materialOptions({store_id:this.store_id,name:this.name})
				result.data.forEach(item=>{
					item.checked = false
				})
				this.list = result.data
			},
			search(e){
				console.log(e)
				this.name = e
				this.getlist2()
			},
			async getlist2() {
				let list2 = this.list2
				const result = await materialOptions({store_id:this.store_id,name:this.name})
				result.data.forEach(item=>{
					list2.forEach(item2=>{
						if(item2.checked){
							item.checked = true
						}else{
							item.checked = false
						}
					})
				})
				this.list = result.data
			},
			toSelect(id,i){
				let list = this.list
				list.forEach(item=>{
					if(item.id == id){
						item.checked = true
					}
				})
				this.list2 = list
			},
			toSelect2(id,i){
				let list = this.list
				list.forEach(item=>{
					if(item.id == id){
						item.checked = false
					}
				})
			},
			toUrl(){
				let arr = []
				let list = this.list
				list.forEach(item=>{
					if(item.checked){
						arr.push({
							name:item.name,
							id:item.id
						})
					}
				})
				uni.setStorageSync('arr', arr);
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-bottom: 150rpx;

		.show {
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, 0.3);

			.showCon {
				background: white;
				text-align: center;
				width: 76%;
				padding: 37rpx;

				.show-tit {
					font-size: 38rpx;
					font-weight: bold;
					margin-bottom: 25rpx;
				}

				input {
					border: solid 1rpx #707070;
					padding: 17rpx;
					width: 80%;
					display: block;
					margin: 0 auto 50rpx;
				}

				.show-btn {
					background: #FF6543;
					border-radius: 12rpx;
					width: 188rpx;
					line-height: 60rpx;
					color: white;
					text-align: center;
					font-size: 32rpx;
					font-weight: bold;
					margin: 0 auto;
				}

				.show-btn2 {
					background: gainsboro;
				}
			}
		}
	}

	.list {
		margin: 20rpx 30rpx;
		background: white;
		border-radius: 12rpx;
		box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;
		padding: 20rpx;

		.info {
			padding-bottom: 24rpx;
			border-bottom: solid 1rpx gainsboro;

			.info-left {
				.title {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 24rpx;
				}

				.time {
					color: #AAAAAA;
					font-size: 26rpx;
				}
			}

			.select {
				color: white;
				background: #FF6543;
				border-radius: 12rpx;
				font-size: 28rpx;
				font-weight: bold;
				width: 144rpx;
				line-height: 63rpx;
				text-align: center;
			}
			.select2{
				background: #D9D9D9;
			}
		}

		.list-btns {
			justify-content: space-around;
			padding-top: 16rpx;
			.list-btn {
				text-align: center;
				padding: 10rpx 20rpx;
				color: #FF6543;
				font-size: 28rpx;
				border-radius: 10rpx;
			}
		}


	}

	.btns {
		background: #FF6543;
		width: 100%;
		line-height: 108rpx;
		font-size: 34rpx;
		font-weight: bold;
		text-align: center;
		bottom: 0;
		left: 0;
		color: white;
		position: fixed;
	}
</style>